<template>
  <div>
    <img class="login-back" src="@/assets/img/u338.png" alt="">
    <img class="login-icon" src="@/assets/img/u339.png" alt="">
    <div id="box">

      <div class="usernameInput">
        <auth-input type="text" placeholder="请输入手机号" rule="^\d{4,16}$" err_message="请输入正确的手机号" @sendData="getUsername"></auth-input>
      </div>

      <div class="passwordInput">
        <auth-input type="password" placeholder="请输入密码" rule="^\w{3,16}$" err_message="请输入正确的密码" @sendData='getPassword'></auth-input>
      </div>
      <!-- {{ username}} {{password}} -->
      <div class="btn">
        <auth-btn text="登 陆" @sendClick="getLogin"></auth-btn>
      </div>
    </div>
    <div @click="gotoRegister" class="goRegister">没有账号?去注册</div>
    <div @click="$router.push('/index')" class="goRegister">匿名访问</div>
  </div>
</template>

<script>
import authInput from '@/commonComponent/authInput.vue'
import authBtn from '@/commonComponent/authButton.vue'
import loginApi from '@/api/login'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  components: {
    authInput,
    authBtn
  },
  methods: {
    getUsername(name) {
      this.username = name
    },
    getPassword(password) {
      this.password = password
    },
    getLogin() {
      loginApi.getLogin(this.username, this.password).then(res => {
        let resp = res.data
        console.log(resp);
        // if (resp.statusCode) {
        //   this.$toast.fail(resp.message)
        // } else {
        //   this.$toast.success(resp.message)
        //   setTimeout(() => {
        //     this.$router.push({ path: '/index' })
        //   }, 1000);
        // }
        if (resp.statusCode === 200) {
          localStorage.setItem('token', resp.data.token)
          localStorage.setItem('user_id', resp.data.user.id)
          this.$toast.success(resp.message)
          setTimeout(() => {
            this.$router.push({ path: '/userinfo' })
          }, 1000);
        }
      })
    },
    gotoRegister() {
      this.$router.push({ path: '/register' })
    }
  }
}
</script>

<style scoped>
div {
  background-color: #f2f2f2;
}

.login-back {
  position: absolute;
  width: 8vw;
  top: 4vw;
  left: 4vw;
}

.login-icon {
  display: block;
  width: 30vw;
  margin: 20vw auto 5vw auto;
}

#box {
  max-width: 100vw;
  margin: 0 5vw;
}

.goRegister {
  text-align: center;
  margin-top: 10vw;
}
</style>
